import React, { Component } from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore, applyMiddleware, compose } from "redux"
import { counter } from "./index.redux";
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom'

const store = createStore(counter, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : () => { }
))

function er() {
  return <h2>二营出来了</h2>
}
function san() {
  return <h2>三营出来了</h2>
}
// 登陆
//   没有登陆信息，统一跳转login
// 页面  导航+显示+注销
//   权限控制

ReactDom.render(
  (<Provider store={store}>
    <BrowserRouter>
      {/* <App /> */}
      <div>
        <ul>
          <li>
            <Link to='/'>一营</Link>
          </li>
          <li>
            <Link to='/er'>二营</Link>
          </li>
          <li>
            <Link to='san'>三营</Link>
          </li>
          <Route path='/' exact component={App}></Route>
          <Route path='/er' component={er}></Route>
          <Route path='/san' component={san}></Route>
        </ul>
      </div>

    </BrowserRouter>
  </Provider>),
  document.getElementById('root')
)

// ==================================================================
// import { createStore } from "redux";
// // 2.通过reducer建立
// // 3.根据老的state和action生成新的state

// function counter(state=0,action) {
//   console.log(action)
//   switch (action.type) {
//     case '加机关枪':
//      return state+1
//     case '减机关枪':
//      return state - 1
//     default:
//       return 10
//   }
// }

// // 1新建store
// const store = createStore(counter)
// const init = store.getState()
// console.log(init)

// function listener() {
//   const current = store.getState()
//   console.log( `现在有机枪${current}把`)
// }
// store.subscribe(listener)

// // 派发事件，传递action
// store.dispatch({ type:'加机关枪'})
// console.log(store.getState())

// ======================================
// redux如何和react一起用
// 把store.dispatch方法传递给组件，内部可以调用修改状态
// Subscript订阅render函数，每次修改都重新渲染
// redux相关内容，移到单独的文件index.redux.js单独管理